<template>
  <div class="echarts">
    <ECharts :option="option" />
  </div>
</template>

<script setup lang="ts" name="BarEcharts">
import ECharts from "@/components/ECharts/index.vue";
import { onMounted, reactive, watch } from "vue";
const props = defineProps({
  data: {
    type: Object,
    required: false,
    default: () => ({})
  },
  type: {
    type: Array,
    required: false,
    default: () => []
  },
  colorList: {
    type: Array,
    required: false,
    default: () => []
  },
  name: {
    type: String,
    required: false,
    default: ""
  },
  unit: {
    type: String,
    required: false
  }
});
const option: any = reactive({
  // title: {
  //   text: "Stacked Area Chart",
  //   textStyle: {
  //     color: "#a1a1a1"
  //   }
  // },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "cross",
      label: {
        backgroundColor: "#6a7985"
      }
    }
  },
  grid: {
    left: "10px",
    right: "20px",
    bottom: "10px",
    containLabel: true
  },
  legend: {
    data: [],
    right: "10px",
    icon: "rect",
    itemWidth: 16, // 设置图例图标的宽度
    itemHeight: 16, // 设置图例图标的高度
    itemGap: 30 // 设置图例项之间的间距
  },
  xAxis: [
    {
      type: "category",
      // boundaryGap: false,
      data: [],
      axisLabel: {
        color: "#a1a1a1"
      }
    }
  ],
  yAxis: [
    {
      type: "value",
      axisLabel: {
        color: "#a1a1a1"
      }
    }
  ],
  series: [
    // {
    //   name: "紧急",
    //   type: "bar",
    //   stack: "one",
    //   emphasis: {
    //     focus: "series"
    //   },
    //   data: [7, 8, 9, 10, 11, 12, 13],
    //   barWidth: 20
    // },
    // {
    //   name: "重要",
    //   type: "bar",
    //   stack: "one",
    //   emphasis: {
    //     focus: "series"
    //   },
    //   data: [4, 3, 5, 5, 5, 6, 4],
    //   barWidth: 20
    // },
    // {
    //   name: "次要",
    //   type: "bar",
    //   stack: "one",
    //   emphasis: {
    //     focus: "series"
    //   },
    //   data: [7, 6, 5, 4, 3, 2, 3],
    //   barWidth: 20
    // },
    // {
    //   name: "警告",
    //   type: "bar",
    //   stack: "one",
    //   emphasis: {
    //     focus: "series"
    //   },
    //   data: [3, 8, 4, 10, 8, 7, 5],
    //   barWidth: 20
    // }
  ]
});

const setOption = () => {
  const data: any = props.data || {};
  const typeList: any = props.type || [];
  const colorList: any = [];
  option.legend.data = [];
  option.xAxis[0].data = data.xAxisStr || [];
  option.series = [];
  typeList.forEach(item => {
    option.legend.data.push(item.name);
    colorList.push(item.color);
    option.series.push({
      name: item.name,
      type: "bar",
      stack: "one",
      emphasis: {
        focus: "series"
      },
      data: data[item.key] || [],
      barWidth: 20
    });
  });
  option.tooltip.formatter = function (params) {
    let tooltipContent = "";
    let total = 0;
    params.forEach(function (item) {
      total += item.value;
      // 添加其他自定义内容
      tooltipContent += `
        <div>
          <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${item.color};"></span>
          ${item.seriesName}: &nbsp;&nbsp;${item.value}
        </div>
      `;
    });
    let titleContent = `
      <div>${params[0].name}</div>
      <div>
        <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#2d354a;"></span>
        总量: &nbsp;&nbsp;${total}
      </div>
    `;

    return titleContent + tooltipContent;
  };
  if (colorList.length) {
    option.color = colorList;
  }
};
watch(
  () => props.data,
  () => {
    setOption();
  }
);
onMounted(() => {
  setOption();
});
</script>

<style scoped lang="scss">
.echarts {
  width: 100%;
  height: 100%;
}
</style>
